<template>
  <div>
    <div v-if="activeTasks.length > 1" style="margin-bottom: 10px">
      {{$t('webAuto.approvalNode')}}：
      <el-select @change="getEnableRecallNodes" v-model="actionData.taskId" placeholder="选择要处理的节点">
        <el-option :value="task.taskId" :label="task.name+'---'+task.user.name" v-for="task in activeTasks" :key="task.taskId"></el-option>
      </el-select>
      <span style="color: #8c8c8c; margin-left: 10px">{{$t('webAuto.WhichTaskHandled')}}</span>
    </div>
    <div class="choose-users" v-if="(action === 'agree' || action === 'complete' || action === 'refuse') && chooseUsers.length > 0">
      <div v-for="(cu, i) in chooseUsers" :key="i">
        <el-button style="margin-right: 20px" icon="user" @click="selectUser(i)">{{$t('webAuto.Designate')}} {{cu.nodeName}} {{$t('webAuto.personnel')}}</el-button>
        <org-items style="margin-top: 0" v-model="cu.user"/>
      </div>
    </div>
    <div v-if="action === 'recall'" style="margin-bottom: 10px">
      {{$t('webAuto.backNodes')}}：
      <el-select style="margin:10px 0 0 0" v-model="actionData.targetNode" placeholder="选择要回退到的节点">
        <el-option :value="node.nodeId" :label="$t(node.nodeName)" v-for="node in recallNodes" :key="node.nodeId"></el-option>
      </el-select>
      <span v-show="recallNodes.length === 0" style="color: #8c8c8c; margin-left: 10px">{{$t('webAuto.noRollbackNodes')}}😅</span>
      <el-radio-group v-model="actionData.reExecute" class="ml-4">
        <el-radio :value="true" size="large">{{$t('webAuto.directlyCcurrentStep')}}</el-radio>
        <el-radio :value="false" size="large">{{$t('webAuto.mustStepByStep')}}</el-radio>
      </el-radio-group>
    </div>
    <div v-if=" action === 'transfer' || action === 'beforeAdd' || action === 'afterAdd' || action === 'execute'" style="margin-bottom: 10px">
      <span v-if="action === 'transfer'">{{$t('webAuto.shouldHandedCver')}}：</span>
      <span v-else-if="action === 'execute'" style="margin:20xp 0">{{$t('webAuto.shouldCopy')}}：</span>
      <span v-else>{{$t('webAuto.shouldSignFor')}}：</span>
      <el-button style="margin-right: 20px" size="small" icon="user" @click="selectUser">{{$t('module.selectPeoples')}}</el-button>
      <el-tag size="small" v-if="actionData.targetUser">{{actionData.targetUser.name }}</el-tag>
      <el-tag size="small" v-else v-for="(item,index) in orgPicker.value" :key="index" style="margin-right: 10px">{{item.name }}</el-tag>
    </div>
    <el-input v-if="action != 'execute'" type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" maxlength="255" show-word-limit
              :placeholder="actionDesc.tip" v-model="actionData.comment.text"></el-input>
    <div class="action-content" v-if="action != 'execute'">
      <image-upload class="image-upload" v-model="imageList" :placeholder="$t('webAuto.AddImg')" :max-size="10" :max-number="10" :mode="isMobile ? 'MOBILE' : 'PC'"/>
      <file-upload v-model="fileList" :placeholder="$t('homePage.addAttachment')" :max-size="100" :max-number="5" :mode="isMobile ? 'MOBILE' : 'PC'"/>
    </div>
    <div v-if="showSignCt">
      <el-divider>{{$t('webAuto.sign')}}</el-divider>
      <sign-panel :mode="isMobile ? 'MOBILE':'PC'" v-model="actionData.signature"/>
      <div>
        <el-button link type="primary" style="margin-right: 30px" @click="loadBeforeSign">{{$t('webAuto.UseLastSignature')}}</el-button>
        <el-checkbox v-model="actionData.updateSign">{{$t('webAuto.SaveSignature')}}</el-checkbox>
      </div>
    </div>
    <org-picker :pc-mode="!isMobile" :title="orgPicker.title" :type="user" ref="orgPicker"
                :multiple="orgPicker.multiple" :selected="orgPicker.selected" @ok="selected"/>
  </div>
</template>

<script>
import { approvalTask, getEnableRecallNodes, getTaskNodeSettings,approvalTask2 } from '@/api/processTask'
import SignaturePad from 'signature_pad'
import { getModelById } from '@/api/modelGroup'
import OrgPicker from '@/components/common/OrgPicker.vue'
import ImageUpload from '../../common/form/components/ImageUpload.vue'
import FileUpload from '../../common/form/components/FileUpload.vue'
import OrgItems from "../../common/process/OrgItems.vue";
import SignPanel from "../../common/form/components/SignPanel.vue";
import {getUserSign} from "@/api/org";
import {compressBase64Image} from '@/utils/imageUtil'

export default {
  name: 'ProcessAction',
  components: { OrgPicker, ImageUpload, FileUpload, OrgItems, SignPanel,},
  props: {
    action: {
      type: String,
      default: 'agree',
    },
    instance: {
      type: Object,
      required: true,
    },
    showSign: {
      type: Boolean,
      default: false,
    },
    activeTasks: {
      type: Array,
      default: () => {
        return []
      },
    },
    actionDesc: {
      type: Object,
      default: () => {
        return {}
      },
    },
    formData: {
      type: Object,
      default: () => {
        return {}
      },
    },
    graphics:{
      type:String,
      default:''
    },
    taskPage:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      visible: false,
      hasSign: false,
      signVisible: false,
      signaturePad: null,
      imageList:[],
      fileList:[],
      chooseUsers: [],
      orgPicker: {
        multiple: false,
        selected: [],
        title: '选择人员',
        value: []
      },
      showSign: false,
      recallNodes:[],
      actionData:{
        taskId: null,
        reExecute:false,//是否逐级审批
        signature: '',
        targetNode: null,
        targetUser: null,
        updateSign: false,
        comment: {
          text: '',
          attachments: []
        },
      },
      owner:''
    }
  },
  computed: {
    loginUser(){
      return this.$store.state.loginUser
    },
    isMobile() {
      return window.screen.width < 450
    },
    showSignCt(){
      return this.showSign &&
        (this.action === 'refuse' || this.action === 'agree')
    },
  },
  mounted() {
    if (this.action === 'recall'){
      this.getEnableRecallNodes()
    }
    
    let name=JSON.parse(localStorage.getItem('loginUser'))?.name//获取当前登录人

    if (this.activeTasks.length > 0){
      let arr=this.activeTasks.filter(x=>x.user.name==name)
      this.actionData.taskId = arr.length?arr[0].taskId:this.activeTasks[0].taskId
    }
  },
  methods: {
    show() {
      this.visible = true
    },
    close() {
      this.visible = false
    },
    showSignPanel() {
      this.signVisible = true
      this.$nextTick(() => {
        this.initSign()
      })
    },
    loadFormInfo(id) {
      getModelById(id)
        .then((rsp) => {
          let form = rsp.data
          form.logo = JSON.parse(form.logo)
          this.form = form
        })
        .catch((err) => {
          this.$err(err, this.$t('webAuto.FailedProcessModel'))
        })
    },
    selectUser(i){
      if (this.action === 'transfer'){
        this.orgPicker.title = this.$t('webAuto.SelectHanded')
        this.orgPicker.multiple = false
        this.orgPicker.selected = this.actionData.targetUser ? [this.actionData.targetUser]: []
      }else if (this.action === 'execute') {
        this.orgPicker.title = this.$t('webAuto.CCRecipients')
        this.orgPicker.multiple = true
        this.orgPicker.selected = this.actionData.targetUser ? [this.actionData.targetUser]: []
      }else if (this.action === 'afterAdd') {
        this.orgPicker.title = this.$t('webAuto.additionalSignatories')
        this.orgPicker.multiple = false
        this.orgPicker.selected = this.actionData.targetUser ? [this.actionData.targetUser]: []
      }else {
        this.orgPicker.multiple = true
        this.orgPicker.selected = this.chooseUsers[i].user
        this.orgPicker.value = this.chooseUsers[i].user
        this.orgPicker.title = this.$t('webAuto.nodeApprover')
      }
      this.$refs.orgPicker.show()
    },
    selected(users) {
      if (this.action === 'transfer' || this.action === 'afterAdd') {
        if (users[0].id === this.loginUser.id){
          this.$message.warning(this.$t('webAuto.NotAllowSself'))
        } else {
          this.actionData.targetUser = users[0]
        }
      }else {
        this.orgPicker.value.length = 0
        this.orgPicker.value.push(...users)
      }
    },
    initSign() {
      if (this.signaturePad) {
        this.signaturePad.clear()
      } else {
        let canvas = document.getElementById('signPanel')
        if (this.mode === 'MOBILE'){
          canvas.setAttribute('height', '200px')
        }else {
          canvas.setAttribute('width', '650px')
          canvas.setAttribute('height', '300px')
        }
        this.signaturePad = new SignaturePad(canvas, {
          penColor: this.color,
          minWidth: this.thickness,
          maxWidth: this.thickness + 2,
        })
        if (this.mode === 'MOBILE') {
          canvas.width = document.body.clientWidth
        }
      }
    },
    loadBeforeSign(){
      getUserSign().then(rsp => {
        if (rsp.data === ''){
          this.$message.warning(this.$t('webAuto.SignatureNotSaved'))
        }else {
          this.actionData.signature = rsp.data
        }
      })
    },
    getTask() {
      if(this.$isNotEmpty(this.actionData.taskId)){
      // console.log(this.activeTasks[0].user.id)
        this.owner=this.activeTasks[0].user.id
        return this.actionData.taskId
      }else if (this.activeTasks.length > 0){
        this.owner=this.activeTasks[0].user.id
        return this.activeTasks[0].taskId
      }else if (this.action === 'cancel'){
        const pg = this.instance.progress || [];
        for (let i = 0; i < pg.length; i++) {
          if (pg[i].users){
            for (let j = 0; j < pg[i].users.length; j++) {
              if (!this.$isNotEmpty(pg[i].users[j].finishTime)){
                this.owner=pg[i].users[j].id
                return pg[i].users[j].taskId
              }
            }
          }else {
            if (!this.$isNotEmpty(pg[i].finishTime)){
              this.owner=pg[i].user.id
              return pg[i].taskId
            }
          }
        }
      }
      return null
    },
    getEnableRecallNodes() {
      getEnableRecallNodes(this.instance.instanceId, this.getTask())
        .then((rsp) => {
          this.recallNodes = rsp.data
        })
        .catch((err) => {
          this.$err(err, this.$t('webAuto.FailObtainRollbackNode'))
        })
    },
    // 更多里面的提交
    submitAction() {
      console.log(this.taskPage,'this.props.taskPage')
      let ccList=[]
      this.orgPicker.value.forEach(item=>{
        ccList.push(item.id)
      })
      let params = {
        instanceId: this.instance.instanceId,
        taskId: this.getTask(),
        comment: {
          text: this.actionData.comment.text,
          attachments: this.imageList.concat(this.fileList)
        },
        reExecute:this.actionData.reExecute, // 退回是否逐级审批
        formData: this.formData,
        signature: this.actionData.signature,
        action: this.action,
        updateSign: this.actionData.updateSign,
        targetNode: this.actionData.targetNode,
        targetUser: this.actionData.targetUser ? this.actionData.targetUser.id:null,
        ccUsers:ccList, //抄送多选
        otherNodeUsers: {}
      }
      if (this.chooseUsers.length > 0){
        this.chooseUsers.forEach(cu => {
          params.otherNodeUsers[cu.nodeId] = cu.user.map(u => u.id)
        })
      }
      if ((this.action === 'beforeAdd' || this.action === 'afterAdd'
        || this.action === 'transfer') && !params.targetUser){
        this.$message.warning(this.$t('webAuto.setPersonnel'))
      }else if(this.action === 'execute'&& ccList.length === 0){
        this.$message.warning(this.$t('webAuto.setPersonnel'))
      }else if (this.action === 'recall' && !this.$isNotEmpty(this.actionData.targetNode)){
        this.$message.warning(this.$t('webAuto.chooseNodeBack'))
      }else if (this.showSignCt && !this.$isNotEmpty(this.actionData.signature)){
        this.$message.warning(this.$t('webAuto.signBeforeSubmitting'))
      }else {
        if(this.graphics!=''){
          console.log(this.graphics) //判断是数据管理画面打开的
          console.log(this.owner) //判断是数据管理画面打开的
          approvalTask2(params,this.owner).then(rsp => {
            this.$emit('success')
            this.$ok(rsp, this.$t('webAuto.TaskProcessedSuccess'))
            if(this.taskPage){
              this.$router.go(0)
            }
            this.close()
          }).catch(err => {
            this.$emit('fail')
            this.$err(err, this.$t('webAuto.TaskProcessingFail')+ err.data)
          })
          return
        }else{
          approvalTask(params).then(rsp => {
            this.$emit('success')
            this.$ok(rsp, this.$t('webAuto.TaskProcessedSuccess'))
            if(this.taskPage){
              this.$router.go(0)
            }
            this.close()
          }).catch(err => {
            this.$emit('fail')
            this.$err(err, this.$t('webAuto.TaskProcessingFail') + err.data)
          })
          return
        }
       
      }
      this.$emit('fail')
    },
    signOk() {
      this.signVisible = false
      if (this.signaturePad.isEmpty()){
        this.actionData.signature = ''
      }else {
        //把签名压缩一下
        compressBase64Image(this.signaturePad.toDataURL(), 0.33).then(res => {
          this.actionData.signature = res
        })
      }
    },
  },
  watch:{
    'actionData.taskId'(){
      getTaskNodeSettings(this.actionData.taskId).then(rsp => {
        this.showSign = rsp.data.enableSign || false
        this.chooseUsers = rsp.data.chooseUsers || []
      }).catch(e => {
        this.$err(e, this.$t('webAuto.setNodeFail'))
      })
    }
  },
  emits: ['success','fail'],
}
</script>

<style lang="less" scoped>
.action-content {
  margin-top: 20px;
  img {
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 20px;
    &:hover {
      border: 1px dashed @theme-primary;
    }
  }

  :deep(.image-upload) {
    margin-bottom: 20px;
    .el-upload-list__item,
    .el-upload--picture-card {
      height: 65px;
      width: 65px;
    }
    .el-upload--picture-card {
      line-height: 70px;
    }
  }
}
canvas {
  border: 1px dashed #666666;
}

.choose-users {
  background: #F7F7F7;
  padding: 5px;
  border-radius: 5px;
  &> div{
    display: flex;
    align-items: center;
  }
  margin-bottom: 10px;
}

.sign{
  display: flex;
  align-items: center;
  img{
    width: 40%;
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 20px;
    &:hover{
      border: 1px dashed @theme-primary;
    }
  }
}
</style>
